<template>
    <div class='order'>
        <div class="container">
            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" class="search-con">
                <!-- <el-col :span="24" > -->
                <el-form-item>
                    <el-button size="mini" v-for="item, index in btnList" :key="index" @click="changeTab(item, index)" :type="curLine == index ? 'primary' : 'default'">
                        {{ item.dictLabel }}</el-button>
                    <!-- ({{ item.orderNum }}) -->
                </el-form-item>
                <!-- </el-col> -->
                <!-- <el-form-item label="输入搜索：" prop="key_order_no" style="margin-right:50px;">
                    <el-input v-model="queryParams.key_order_no" placeholder="订单号" clearable size="small" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item> -->
            </el-form>
            <el-row :gutter="10" class="mb8">
                <el-col :span="22">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="title='新增';handleShow='add'" v-hasPermi="['user:depart:add']">
                        申请提现</el-button>
                </el-col>
                <!-- <el-col :span="22">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleBulk"
                        v-hasPermi="['customer:manage:add']">
                        批量修改</el-button>
                </el-col> -->
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
            <el-table border v-loading="loading" :data="tableList" ref="tableList" v-tableHeight :height="tableList.length > 0 ? '900px' : '120px'"
                @selection-change="handleSelectionChange" @row-click="toggleSelection">
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column label="序号" align="center" prop="id" width='80px' />
                <el-table-column label="申请员工信息" width='230px'>
                    <template slot-scope="scope">
                        <!-- <div style="display: flex;align-items: center;;">员工头像:<el-image style="width: 40px; height: 40px;border:1px solid #eee;border-radius: 5px;"
                                :src="scope.row.staff.avatar" :preview-src-list="[scope.row.staff.avatar]">
                            </el-image>
                        </div> -->
                        <div>员工编号：<span style="color: #30B08F;font-weight: 600;">{{ scope.row.staff_id }}</span></div>
                        <!-- <div>员工账号：<span style="color: #30B08F;font-weight: 600;">{{ scope.row.staff.login_account }}</span></div>
                        <div>员工姓名: <span style="color: #30B08F;font-weight: 600;">{{ scope.row.staff.name}}</span></div> -->
                    </template>
                </el-table-column>
                <el-table-column label="申请信息" width='260px'>
                    <template slot-scope="scope">
                        <div>订单编号：{{ scope.row.order_no }}</div>
                        <div>申请提现金额：<span style="color: #30B08F;font-weight: 600;">{{ scope.row.with_amount }}</span></div>
                        <div>扣除手续费:{{ scope.row.handling_amount}}(手续费比例{{(scope.row.handling_amount/scope.row.with_amount) *100}}<span>%</span>)</div>
                        <div>理论到账金额:<span style="color: #30B08F;font-weight: 600;">{{ scope.row.theory_account_amount }}</span>(实际到账金额：<span style="color: #30B08F;font-weight: 600;">{{scope.row.reality_account_amount
                                }}</span>)</div>
                    </template>
                </el-table-column>
                <el-table-column label="打款账号信息" width='480px'>
                    <template slot-scope="scope">
                        <div>账户信息：<span style="color:rgb(70, 68, 68);font-weight: 600;">{{ scope.row.account.name ? scope.row.account.name : '' }}</span>(预留手机号：{{scope.row.account.mobile
                            ? scope.row.account.mobile : ''}})[身份证号：{{scope.row.account.idcard ? scope.row.account.idcard : ''}}]</div>
                        <div>开户地：<span style="color:rgb(70, 68, 68);font-weight: 600;">{{ scope.row.account.open_location ?
                                scope.row.account.open_location : '' }}</span></div>
                        <div>开户行:<span style="color:rgb(70, 68, 68);font-weight: 600;">{{ scope.row.account.open_bank ? scope.row.account.open_bank :
                                ''}}</span></div>
                        <div>银行卡号:<span style="color:rgb(70, 68, 68);font-weight: 600;">{{ scope.row.account.card_number ?
                                scope.row.account.card_number : '' }}</span></div>
                        <div>银行信息:<span style="color:rgb(70, 68, 68);font-weight: 600;">{{ scope.row.account.bank ? scope.row.account.bank.name : ''
                                }}({{scope.row.account.bank ? scope.row.account.bank.short_code :'' }})[{{ scope.row.account.bank ?
                                scope.row.account.bank.cnaps_code : '' }}]</span></div>
                    </template>
                </el-table-column>
                <el-table-column label="审核信息">
                    <template slot-scope="scope">
                        <div>审核状态：<span style="color: #30B08F;font-weight: 600;">{{ selectDictLabel(btnList, scope.row.withdr_state) }}</span></div>
                        <div>申请提交时间：{{ scope.row.submit_time }}</div>
                        <div v-if="scope.row.withdr_state == 1">审核通过时间：{{ scope.row.success_time}}</div>
                        <div v-if="scope.row.withdr_state == -1">审核失败时间：{{ scope.row.fail_time }}</div>
                        <div v-if="scope.row.withdr_state != 0">审核描述:{{scope.row.exam_desc}}</div>
                        <div v-if="scope.row.withdr_state != 0">审核凭证:
                            <el-image v-for="url in scope.row.exam_pic" :key="url" style="width: 50px; height: 50px;border:1px solid #eee;margin-right: 10px;"
                                :src="url" :preview-src-list="[url]">
                            </el-image>
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="订单状态" align="center" prop="order_state">
                    <template slot-scope="scope">
                        <span>
                            {{ selectDictLabel(statusList, scope.row.order_state) }}
                        </span>
                    </template>
                </el-table-column> -->
            </el-table>
            <pagination v-show="pageCount > 0" :pageCount="pageCount" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />
        </div>
        <withdraw v-if="handleShow == 'add'" :handleShow="handleShow" @close="handleShow = ''" @load="getList" />
    </div>
</template>
<script>
import { getWithLists } from "@/api/finance/finance.js"
import withdraw from "./handle/withdraw"
// import { orderStatus } from "@/api/dictionary"

import throttle from 'lodash.throttle'
export default {
    name: 'wdList',
    components: {
        withdraw,
    },
    props: {

    },
    data() {
        return {
            showSearch: true,
            loading: false,
            pageCount: 0,
            total: 0,
            orderNum: 0,
            queryParams: {
                page: 1,
                limit: 20,
                key_withdr_state: '',
            },
            tableList: [],
            handleShow: "",
            formLoading: false,
            curLine: 0,
            btnList: [
                {
                    dictLabel: '全部',
                    dictValue: ''
                },
                {
                    dictLabel: '提现中',
                    dictValue: 0
                },
                {
                    dictLabel: '审核成功',
                    dictValue: 1
                },
                {
                    dictLabel: '审核失败',
                    dictValue: -1
                },

                // {
                //     dictLabel: '已取消',
                //     dictValue: -1
                // }
            ],
        }
    },
    created() {
        this.getList()

    },
    methods: {
        getList() {
            this.loading = true;
            getWithLists(this.queryParams).then(res => {
                this.tableList = res.data.lists;
                this.pageCount = res.data.pageCount;
                this.loading = false;
            });
        },
        changeTab(item, index) {
            this.curLine = index
            this.queryParams.key_withdr_state = item.dictValue
            this.getList()
        },
        close() {
            this.form = {}
            this.handleShow = ""
            this.getList()
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        toggleSelection(row) {
            this.$refs.tableList.toggleRowSelection(row);
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.selectData = selection;
        },
        handleBulk(ids) {
            this.$confirm('是否确认批量修改?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delSector({ id: row.id });
            }).then(() => {
                this.getList();
                this.msgSuccess("修改成功");
            })
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm('是否确认导出所有数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function () {
                // return exportBanner(queryParams);
            }).then((response) => {
                // this.download(response.msg);
            });
        },
        // close() {
        //     this.form = {}
        //     this.handleShow = ""
        // },
        // handleAssign(row) {
        //     this.title = '指派员工';
        //     this.form1.order_no = row.order_no;
        //     console.log(this.form1.order_no, 'dingdan')
        //     this.handleShow = 'assign'
        // },
        // handleDetail(row) {
        //     this.title = '订单详情';
        //     // this.form = JSON.parse(JSON.stringify(scope.row));
        //     this.handleShow = 'detail';
        //     getServiceOrderInfo({ order_no: row.order_no }).then(res => {
        //         console.log(res, 'dingdanxiangqing')
        //         this.form = res.data
        //     })
        // },
        // handleCancel(row) {
        //     this.$confirm(`是否将“${row.name}”订单取消?`, "确认提醒", {
        //         confirmButtonText: "确定",
        //         cancelButtonText: "取消",
        //         type: "warning"
        //     }).then(function () {
        //         return setSectorStatus({ order_no: row.order_no });
        //     }).then(() => {
        //         this.getList();
        //         this.msgSuccess(`${label}成功`);
        //     })
        // },
        // handleComplete(row) {
        //     this.$confirm('是否确认完成' + '"' + row.name + '"' + '?', "确认提醒", {
        //         confirmButtonText: "确定",
        //         cancelButtonText: "取消",
        //         type: "warning"
        //     }).then(function () {
        //         return setServiceOrderComplete({ order_no: row.order_no });
        //     }).then(() => {
        //         this.getList();
        //         this.msgSuccess("订单已完成");
        //     })
        // },

        // submit: throttle(function () {
        //     this.$refs.form1.validate((valid) => {
        //         if (valid) {
        //             this.formLoading = true;
        //             let params = {
        //                 staff_id: this.form1.staff_id,
        //                 order_no: this.form1.order_no
        //             }
        //             setAssignStaff(params).then(res => {
        //                 this.msgSuccess("操作成功！");
        //                 this.close()
        //                 this.formLoading = false;
        //                 this.getList();
        //             }).catch(() => {
        //                 this.formLoading = false;
        //             })
        //         }
        //     })
        // }, 1000, { trailing: false }),

    }
}
</script>

<style lang='scss' scoped>
.decs {
    /deep/.el-descriptions--mini.is-bordered .el-descriptions-item__cell {
        padding: 0 10px;
    }

    /deep/.el-descriptions-item__cell {
        padding-left: 8px;
        font-size: 14px;
    }

    /deep/ .el-col {
        margin: 0px;
        padding: 0px;
        height: 30px;
        line-height: 30px;
    }

    /deep/.el-form-item__error {
        top: 21%;
        right: 5% !important;
        left: unset;
    }
}

.p {
    font-size: 14px;
}
</style>
